﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script type='text/javascript' src="../static/js/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title : {
        text: '高平市三大平台销售额',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['乐县域','特色馆','乐6集']
    },
    series : [
        {
            name: '三大平台',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:31309308.3, name:'乐县域'},
                {value:2943720.92, name:'乐6集'},
                {value:2572508, name:'特色馆'}           
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    <div id="main2" style="width: 1000px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main2'));

var option2= {
    title: {
        text: '三大平台销售额走势'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['乐县域','特色馆','乐6集']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['201508','201509','201510','201511','201512','201601','201602','201603',
            '201604','201605','201606','201607','201608','201609','201610','201611']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'乐县域',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[0,0,0,0,9941897,54036,268980,565883.3,14624901.9,2344369.45,2054812.9,241594.7,129354.5,101009.5,772544.15,202574.4]
        },
        {
            name:'特色馆',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[0,0,0,0,6640,661.6,29.9,1209.1,179.9,144,502743.7,0,22470,0,0,2038429.8]
        },
        {
            name:'乐6集',
            type:'line',
            stack: '总量',
            areaStyle: {normal: {}},
            data:[212616.1,13095.4,333028.3,508879.52,440008.41,230648.69,1598,8725.3,46271.35,121990.57,385505.7,46292.49,125765.5,126689.9,284430,47728.69]
        }
            ]
};
myChart1.setOption(option2);
  </script>


<div id="main3" style="width: 1000px;height:500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart3 = echarts.init(document.getElementById('main3'));
option3 = {
    title: {
        text: '商品销售额TOP10',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['商品销售额TOP10']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: [ '登海605（4200粒） 体验店下单通道1*17袋',
            '京科665玉米杂交种（4400粒） 体验店下单通道1*15袋',
            '蠡玉90  (4200粒) 体验店下单通道1*13罐',
            '裕丰303（4400粒） 4400粒',
            '奥瑞金 正成018（4500粒） 体验店下单通道1*14袋',
            '先锋 先玉696 4400粒 体验店下单通道1*17袋',
            '奥瑞金   正成018（4500粒） 4500粒',
            '登海605（4200粒） 4200粒',
            '并单390 （4400粒） 体验店下单通道1*13袋',
'先锋 先玉696 4400粒'

]
    },
    series: [
        {
            name: '商品销售额TOP10',
            type: 'bar',
            data: [1005480,1211760,1353300,1500247,1998480,2042280,2159340,2174250,2295150,4104750]
        }
    ]
};

myChart3.setOption(option3);
  </script>



</body>
</html>